<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //封装成一个函数
//        oParent 决定了我从哪个父级下面去选取元素
 //       sclass 表示我所要找的那个样式名称

        function getByClass(oParent,sClass){//封装成一个带参数的函数块
            var aResult=[];//目的是定义一个空数组，将找到的sClass全部堆到里面，然后再全部返回出来
            var aEle=oParent.getElementsByTagName('*');//获取指定父级下面的所有标签
            for(var i=0;i<aEle.length;i++){ //对所有标签遍历一遍
                if(aEle[i].className==sClass){//找到样式名字是sClass的标签
                  aResult.push(aEle[i]);//将找到的标签全部放在aResult数组里
                }
            }
            return aResult;//全部找完之后，再一起返回
        }
//        封装的这个函数框架，作用是在父级下找到样式为box的标签

        window.onload=function(){

          var oUl=document.getElementById('ul1');
          var aBox=getByClass(oUl,'box')[0];//找到的样式为box标签为多个，就应该一个for循环，一个个的赋值，让其变为红色背景
           alert(aBox);
            for(var i=0;i<aBox.length;i++){
              aBox[i].style.background='red';

          }
        };
    </script>
</head>
<body>
<ul id="ul1">
    <li class="box"></li>
    <li></li>
    <li></li>
    <li class="box"></li>
    <li></li>
    <li class="box"></li>
</ul>
</body>
</html>